import { defineComponent, reactive, ref, watch } from 'vue'
import { getSlot } from '@/utils/tsxHelper'
import mineClass from './mine.module.scss'

export default defineComponent({
  props: {
    name: {
      type: String,
      default: ''
    },
    error: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit, slots, attrs }) {
    const state = reactive({
      name: props.name,
      error: props.error
    })

    console.log('----')
    console.log('----')
    console.log('----')

    // return () => (
    //   <div style={styles.name}>
    //     我的姓名：{state.name}
    //     <div style={styles.p}>tsx初体验</div>
    //     <div class={[mineClass.title, mineClass.p]}>tsx初体验</div>
    //     <div>{() => getSlot(slots, 'footer')}</div>
    //   </div>
    // )
    return {
      state
    }
  },
  render() {
    const titles = ['title1', 'title2']
    const type = 'header-1111'
    const { name } = this.state
    const renderErrorItem = () => <div>{getSlot(this.$slots, 'error')}</div>
    const renderHeaderItem = (titles: Array<string>, type: string) => (
      <div>{getSlot(this.$slots, 'header', { titles, type })}</div>
    )
    const renderFooterItem = () => <div>{getSlot(this.$slots, 'footer')}</div>

    return (
      <div style={styles.name}>
        我的姓名：{name}
        <div style={styles.p}>tsx初体验</div>
        <div class={[mineClass.title, mineClass.p]}>tsx初体验</div>
        {renderHeaderItem(titles, type)}
        {renderFooterItem()}
        {renderErrorItem()}
      </div>
    )
  }
})

const styles = {
  name: {
    fontSize: '18px',
    color: 'red'
  },
  p: {
    display: 'flex',
    fontSize: '20px'
  }
}
